<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .heder-a h2 {
            margin: 20px 20px 0 20px;
        }

        .heder-a h2:nth-child(1) {
            color: #4299ff;
            border-bottom: 3px solid #aad9f7;
        }

        /* 以上是单个样式 */
        .fun {
            margin: 15px;
            height: 80px;
        }

        .fun h1 {
            margin-top: 15px;
            color: #4294ff;
        }

        .map {
            height: 500px;
            position: relative;
        }

        .map button {
            margin: 20px 20px 0 20px;
            border-radius: 20px;
            text-align: center;
            color: #fff;
            font-size: 10px;
            height: 30px;
            width: 100px;
        }

        .map p {
            position: absolute;
            width: 100%;
        }

        .map button:nth-child(1) {
            background-color: #4294ff;
        }

        .map button:nth-child(2),
        .map button:nth-child(3) {
            background-color: #9cbce2;
        }
        * { margin: 0; padding: 0; }
a { text-decoration: none; }
ul { list-style: none; }
body,  html { height: 100%; font-family: "微软雅黑"; }
.box { width: 100%; height: 600px; margin: 40px 0; }
#container1,  #container2 { width: 100%; height: 100%; }
#container3 { width: 80%; height: 100%; }
.list { width: 20%; height: 100%; background: #eee; }
.list li { height: 34px; line-height: 34px; padding-left: 20px; }
.list li.active a { color: red; }
.title { font-size: 14px; font-weight: bold; color: #cc5522; }
.content { font-size: 13px; color: #333; margin-top: 6px; }
.fl { float: left; }
    </style>
</head>

<body>
    <!-- 顶部公共样式 -->
    <div class="heder ">
        <div class="heder-a df jcsb">
            <h2>跑步</h2>
            <h2>飞行</h2>
            <h2>课程训练</h2>
        </div>
        <hr>
    </div>
    <div class="fun bd">
        <h3>目前累计跑步距离是：</h3>
        <p>
        <h1 class="ds"> 9999.99</h1> <i>公里</i> </p>
    </div>
    <div class="map bd">
        <p class="bd  df jcsb ">
            <button>跑步</button>
            <button>飞行</button>
            <button>课程训练</button>
        </p>
        <div class="box">
            <div id="container3" class="container fl"></div>
            <ul class="list fl">
      <li> <a href="javascript:void(0)">厦门中山公园</a> </li>
      <li> <a href="javascript:void(0)">厦门实验小学</a> </li>
      <li> <a href="javascript:void(0)">厦门光明大厦</a> </li>
      <li> <a href="javascript:void(0)">厦门将军祠</a> </li>
      <li> <a href="javascript:void(0)">厦门古龙商城</a> </li>
    </ul>
          </div>
  <div class="box">
            <div id="container1"></div>
          </div>
  <div class="box">
            <div id="container2"></div>
          </div>
       

    </div>



    <div class="tabbar">
        <ul>
            <li>
                <a href="#">
                    <p>
                        <img class="default" src="../../assets/imgs/tabbar_0.png" />
                        <img class="on" src="../../assets/imgs/tabbar_0_on.png" />
                    </p>
                    <span>首页</span>
                </a>
            </li>
            <li>
                <a href="#" class="active">
                    <p>
                        <img class="default" src="../../assets/imgs/tabbar_1.png" />
                        <img class="on" src="../../assets/imgs/tabbar_1_on.png" />
                    </p>
                    <span>运动</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <p>
                        <img class="default" src="../../assets/imgs/tabbar_2.png" />
                        <img class="on" src="../../assets/imgs/tabbar_2_on.png" />
                    </p>
                    <span>圈子</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <p>
                        <img class="default" src="../../assets/imgs/tabbar_3.png" />
                        <img class="on" src="../../assets/imgs/tabbar_3_on.png" />
                    </p>
                    <span>我的</span>
                </a>
            </li>
        </ul>
    </div>
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=A1LU7iHS0avqQwPLAxbhKn0UYSQCuRVH"></script>
</body>

</html>